[#ftl]
[@define "agile._MetadataAware" "_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin"]
	//widgetsInTemplate:true,
	context:null,metadataCategory:"style",name:"",htmlName:"",value:"",defValue:"",width:"80px",placeHolder:"",unit:"",tooltip:"",fireOnChange:true,required:false,_valueRegExp: null,_integerRegExp:new RegExp("^(-?[0-9]+)$"),_decimalRegExp:new RegExp("^(0.[0-9]+)$")
	,sequence:0,isKey:false
	,constructor:function(){
		aspect.after(this,"startup",lang.hitch(this,function(){
			if(!this._initMetadataAware){								
				this.init();
				this._initMetadataAware = true;
			}
		}));
	}
	,postMixInProperties:function(){
		if(this.templateString){			
			this.templateString = lang.replace(this.templateString,agile.i18nValues(this.templateString,this));			
		}
	}
	,init:function(){
		
	}
	,initState:function(context){
	}
	,initCustomState:function(widget){
	}

	,onChange:function(value,name,htmlName){
		//summary: apply style changes to the working widget
//		console.log(this.declaredClass,lang.replace("##[_MetadataAware]:value={0},name='{1}',htmlName='{2}',has context={3}",[value,name,htmlName,this.context != null]));
		if(this.context && htmlName){//for style attributes
			var ownerWidget = this.context.getCurrentWidget();
//			console.log("ownerWidget:",ownerWidget);
			if(ownerWidget){
				if(ownerWidget.get("captureKeyframe")){
					topic.publish("style-changed",ownerWidget,htmlName,value);//publish to animation editor
					if(htmlName == "animation"){
						ownerWidget.metadata("style."+htmlName,value);
					}
				}else{					
					agile.commit([{action:"update",target:ownerWidget,category:"style",property:htmlName,beforeValue:ownerWidget.metadata("style."+htmlName),afterValue:value}]);
					ownerWidget.metadata("style."+htmlName,value);
				}	
				if(htmlName != "animation"){
					var jsName = agile.adviseCssName4Js(htmlName);	
	//				console.log("############",value,name,htmlName,jsName);
					array.forEach(ownerWidget.getStyleNodes(htmlName),function(node){
						style.set(node,jsName,value);
					});
					
					var constraint = ownerWidget.styleConstraints[htmlName];
					if(constraint){					
						constraint.onValueChange(ownerWidget,name,htmlName,value);
					}		
				}
			}
		}else if(this.context && name){
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget){
				//for widget properties
				var constraint = ownerWidget.attributes[name];
				if(constraint){		
					agile.commit([{action:"update",target:ownerWidget,category:"parameters",property:name,beforeValue:ownerWidget.metadata("parameters."+name),afterValue:value}]);
					ownerWidget.metadata("parameters."+name,value);
					constraint.onValueChange(ownerWidget,name,value);					
				}else{
					//for widget events
					constraint = ownerWidget.events[name];
//					console.log(name,"constraint:",constraint);
					if(constraint && !constraint._ignore){
						constraint.onValueChange(ownerWidget,name,value);
					}
				}
			}
		}
	}
	,preview:function(value,name,htmlName){
		//summary:preview the changes without changing the metadata 
		if(this.context){
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget){				
				var jsName = agile.adviseCssName4Js(htmlName);					
				var nodes = ownerWidget.getStyleNodes(htmlName);
				for(var i = nodes.length-1; i >=0; i--){
					style.set(nodes[i],jsName,value);
				}
				var constraint = ownerWidget.styleConstraints[htmlName];
				if(constraint){					
					constraint.onValueChange(ownerWidget,name,htmlName,value);
				}				
			}
		}
	}
//	,supressKeyEvent:function(editor,fireEnterKeyPress){
//		this.own(
//			on(editor, "keyDown", lang.hitch(this,function(event){
//				if (event.keyCode == keys.ENTER){
//					if(fireEnterKeyPress) this.onEnterKeyPress();
//				}				
////				event.stopPropagation();
//			}))
////			,on(editor, "keyUp",function(event){				
////				event.stopPropagation();				
////			})
//		);
//	}
	,onEnterKeyPress:function(){
		//summary:post process after ENTER key is pressed on the form widget
		//console.error(this.declaredClass,"onEnterKeyPress should be removed")
	}
	,isValid:function(){
		return true;
	}
	/*parse the display value to the value expected by the editor widget*/
	 ,parse:function(text){
		 return text;
	 }
	 /*format the value before display in the editor widget*/
	 ,format:function(value){
		 return value;
	}
[/@]
